import React, { useState, useRef, useEffect } from 'react';
import { Send, Paperclip, Globe, Bot } from 'lucide-react';

interface ChatInputProps {
  onSendMessage: (content: string) => void;
  onWebSearchChat?: (content: string) => void;
  disabled?: boolean;
  placeholder?: string;
}

export function ChatInput({
  onSendMessage,
  onWebSearchChat,
  disabled = false,
  placeholder = '输入消息...'
}: ChatInputProps) {
  const [message, setMessage] = useState('');
  const [isUsingWebSearch, setIsUsingWebSearch] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;
    }
  }, [message]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim() || disabled) return;

    if (isUsingWebSearch && onWebSearchChat) {
      onWebSearchChat(message);
    } else {
      onSendMessage(message);
    }
    
    setMessage('');
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  return (
    <div className="border-t bg-white p-4">
      <form onSubmit={handleSubmit} className="max-w-4xl mx-auto">
        <div className="flex items-end gap-2">
          <div className="flex-1 bg-gray-100 rounded-lg p-2 transition-all focus-within:ring-2 focus-within:ring-blue-500 focus-within:bg-white">
            <div className="flex items-center gap-2 px-2 mb-1">
              <button
                type="button"
                onClick={() => setIsUsingWebSearch(!isUsingWebSearch)}
                className={`p-1.5 rounded-full transition-colors flex items-center gap-1 ${
                  isUsingWebSearch 
                    ? 'bg-blue-100 text-blue-600' 
                    : 'text-gray-500 hover:bg-gray-200'
                }`}
                title={isUsingWebSearch ? "使用普通对话" : "使用联网对话"}
              >
                {isUsingWebSearch ? (
                  <>
                    <Globe className="w-5 h-5" />
                    <span className="text-sm">联网搜索</span>
                  </>
                ) : (
                  <>
                    <Bot className="w-5 h-5" />
                    <span className="text-sm">联网搜索</span>
                  </>
                )}
              </button>
              
              <button
                type="button"
                className="p-1.5 text-gray-500 rounded-full hover:bg-gray-200 transition-colors"
                title="上传文件"
              >
                <Paperclip className="w-5 h-5" />
              </button>
              
              <div className="text-xs text-gray-500 ml-auto">
                {isUsingWebSearch ? "联网对话模式" : "普通对话模式"}
              </div>
            </div>
            
            <textarea
              ref={textareaRef}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder={isUsingWebSearch ? "使用联网搜索，获取最新信息..." : placeholder}
              className="w-full bg-transparent resize-none outline-none min-h-[40px] max-h-[150px] placeholder-gray-400"
              disabled={disabled}
            />
          </div>
          
          <button
            type="submit"
            disabled={!message.trim() || disabled}
            className="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <Send className="w-5 h-5" />
          </button>
        </div>
      </form>
    </div>
  );
}